<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>html-dom相关方法</title>
      <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript">
        //动态绑定
        window.onload = function () {
          //先获取btn01的dom
          var btn = document.getElementById("btn01");
          btn.onclick = function() {
            //查找id=java的结点
            var java = document.getElementById("java");
            alert("java结点内容=" + java.innerText);
          }

          var btn2 = document.getElementById("btn02");
          btn2.onclick = function() {
            //查找所有option结点
            var options = document.getElementsByTagName("option");
            for (let i = 0; i < options.length; i++) {
              alert("值=" + options[i].innerText);
            }
          }

          var btn3 = document.getElementById("btn03");
          btn3.onclick = function() {
            var sports = document.getElementsByName("sport");
            for (let i = 0; i < sports.length; i++) {
              //过滤，只显示选中的
              if (sports[i].checked) {
                alert("运动是=" + sports[i].value);
              }
            }
          }

          var btn4 = document.getElementById("btn04");
          btn4.onclick = function() {
            var language = document.getElementById("language");
            var lis = language.getElementsByTagName("li");
            for (let i = 0; i < lis.length; i++) {
              alert("li值=" + lis[i].innerText);
            }
          }

          var btn5 = document.getElementById("btn05");
          btn5.onclick = function () {
            var sel01 = document.getElementById("sel01");
            //1.如果使用 childNodes 获取的是object text 和 object htmloptionelement
            //如果不希望得到 text 对象，需要将所有内容放在一行
            // var options = sel01.childNodes;
            //2.getElementsByTagName
            var options = sel01.getElementsByTagName("option");
            for (let i = 0; i < options.length; i++) {
              if (options[i].selected) {
                alert("值是=" + options[i].innerText);
              }
            }
            //3.sel01 是 htmlSelectElement => 本身具有集合特点
            // var sel01 = document.getElementById("sel01");
            // for (let i = 0; i < sel01.length; i++) {
            //   alert("值是=" + sel01[i].innerText)
            // }
          }

          var btn6 = document.getElementById("btn06");
          btn6.onclick = function () {
            //除了上面的方法外，还可以直接使用属性firstChild
            var sel01 = document.getElementById("sel01");
            alert("xx=" + sel01.firstChild);//是按照 .childNodes 得到第一个子节点 //object text
            alert("yy=" + sel01[0]);//直接是得到第一个option节点 object htmloptionelement
          }

          var btn7 = document.getElementById("btn07");
          btn7.onclick = function () {
            var java = document.getElementById("java");
            //alert(java.parentNode);// object HtmlUListElement.
            //alert(java.parentNode.innerHTML);//
            //alert(java.parentNode.childNodes.length);//4
            var childNodes = java.parentNode.childNodes;
            for (var i = 0; i < childNodes.length; i++) {
              alert("语言= " + childNodes[i].innerText);//java php,c++ py,
            }
          }

          var btn8 = document.getElementById("btn08");
          btn8.onclick = function () {
            //yyds
            var ct = document.getElementById("ct");
            alert(ct.previousSibling.innerText);//object text , 输出undefined
            alert(ct.previousSibling.previousSibling.innerText);//object htmloptionelement,艳红

            alert(ct.nextSibling.innerText);//object text, 输出undefined
            alert(ct.nextSibling.nextSibling.innerText); //object HtmlOptionElement, 输出春花
          }

          //设置#person的文本域
          var btn10 = document.getElementById("btn10");
          btn10.onclick = function () {
            var person = document.getElementById("person");
            person.innerText = "这是我们最新的介绍";
          }


        }
    </script>
  </head>

  <body>
    <div id="total">
      <div class="inner">
        <P>
          你会的运动项目：
        </P>
        <input type="checkbox" name="sport" value="zq" checked="checked">足球
        <input type="checkbox" name="sport" value="tq">台球
        <input type="checkbox" name="sport" value="ppq">乒乓球 <br/>
        <hr/>
        <P>
          你当前女友是谁：
        </P>
        <select id="sel01">
          <option>---女友---</option>
          <option>艳红</option>
          <option id="ct" value="春桃菇凉">春桃</option>
          <option>春花</option>
          <option>桃红</option>
        </select>
        <hr/>
        <p>
          你的编程语言?
        </p>

        <ul id="language"><li id="java">Java~~~</li><li>PHP</li><li>C++</li><li>Python</li></ul>


        <br>
        <br>
        <hr/>
        <p>
          个人介绍:
        </p>
        <textarea name="person" id="person">个人介绍</textarea>
      </div>
    </div>

    <div id="btnList">
      <div>
        <button id="btn01">查找id=java节点</button>
      </div>
      <div>
        <button id="btn02">查找所有option节点</button>
      </div>
      <div>
        <button id="btn03">查找name=sport的节点</button>
      </div>
      <div>
        <button id="btn04">查找id=language 下所有li节点</button>
      </div>
      <div>
        <button id="btn05">返回id=sel01 的所有子节点</button>
      </div>
      <div>
        <button id="btn06">返回id=sel01 的第一个子节点</button>
      </div>
      <div>
        <button id="btn07">返回id=java 的父节点</button>
      </div>
      <div>
        <button id="btn08">返回id=ct 的前后兄弟节点</button>
      </div>
      <div>
        <button id="btn09">读取id=ct 的 value 属性值</button>
      </div>
      <div>
        <button id="btn10">设置#person的文本域</button>
      </div>
    </div>
  </body>
</html>